<template>
    <!-- <el-dialog :visible.sync="videoDialogVisible" width="60%" :before-close="closeVideoDialog">
        <img :src="addr" alt="监控视频" style="width: 100%; height: auto;">
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeVideoDialog">Close</el-button>
        </span>
    </el-dialog>
    <div>
        <el-table :data="numberedFilteredList" style="width: 100%">
            <el-table-column prop="camera_id" label="Camera ID" width="150" />
            <el-table-column prop="time" label="Time" width="200" />
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="primary" @click="toggleEditMode(scope.$index)">查看监控视频</el-button>
                </template>
</el-table-column>
</el-table>
</div> -->
    <div class="main" style="display: flex; justify-content: space-between;">
        <el-table :data="numberedFilteredList" style="width: 50%; height: 580px" stripe
            :row-class-name="tableRowClassName">
            <el-table-column prop="camera_id" label="Camera ID" width="150" />
            <el-table-column prop="time" label="Time" width="200" />
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button @click="toggleEditMode(scope.$index)">查看监控视频</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="background-color: black; width: 50%;">
            <div class="video-player" v-show="videoDialogVisible">
                <img ref="canvas" class="video-canvas" :src="addr" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, computed, nextTick } from 'vue';
import { useUserStore } from '../../stores/index';
import { ElMessage } from 'element-plus';
// import VideoPlayer from '../../components/VideoPlayer.vue';

const userStore = useUserStore();

const videoDialogVisible = ref(false);
const addr = ref('');

const list = ref([]);

const fetchData = async () => {
    try {
        const response = await axios.get("http://127.0.0.1:8000/api/show_monitor", {
            headers: {
                'token': userStore.token
            },
            timeout: 3000
        });
        list.value = response.data.list.map(item => ({
            ...item,
            camera_id: item.camera_id,
            time: item.time,
            video: item.video,
        }));
    } catch (error) {
        ElMessage.error('Error fetching data');
        console.error('Error fetching data:', error);
    }
};

fetchData();

const searchName = ref('');

const filteredList = computed(() => {
    if (searchName.value === '') {
        return list.value;
    } else {
        return list.value.filter(item =>
            item.camera_id.toString().includes(searchName.value.toLowerCase())
        );
    }
});

const numberedFilteredList = computed(() => {
    return filteredList.value.map((item, index) => ({
        ...item,
        index: index + 1,
    }));
});

const toggleEditMode = (index: number) => {
    const item = filteredList.value[index];
    addr.value = item.video.replace(/.*?\/data_video\//, 'http://localhost:8000/videos/');
    videoDialogVisible.value = true;
};

const closeVideoDialog = () => {
    videoDialogVisible.value = false;
};

const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex === 0) {
        return 'first-row';
    }
    return '';
};
</script>

<style scoped>
/* .loginPart {
    width: 80%;
    max-width: 800px;
    padding: 40px;
    background-color: #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    height: 300px;
}

.search-input {
    margin-bottom: 20px;
} */

.first-row {
    background-color: blue;
    /* Light gray color */
}


.video-player {
    position: relative;
    width: 100%;
    height: 500px;
    /* background-color: black; */
    /* text-align: center; */
    /* margin-top: 50px; */
    margin-top: 12px;
}

/* .video-title {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    font-size: 14px;
    color: white;
} */

.video-canvas {
    width: 100%;
    height: 500px;
    /* margin-top: 20px; */
    /* background-color: black; */
}
</style>
